<template>
	<view>
		<u-form :model="form" ref="uForm" label-width="auto" :label-style="{'color':'#909399','width':'180rpx','line-height':'1em'}" :border-bottom="false">
			<!-- 库存清单 -->
			<view class="grid-box">
				<view class="head-title u-m-b-20"><text>库存清单<text class="color-danger">*</text></text></view>
				<view class="u-p-t-30 u-p-b-30">
					<u-button size="medium" plain @click="addGoods">+选择出库</u-button>
					<view class="u-p-t-30" v-if="confirmForm.details.length > 0">
						<goods-table :details="confirmForm.details"  :head="['类型','可回收物','单价','出库重量/数量','','操作']" :noPrice="true" :edit="true" @confirm="(details)=>{confirmForm.details = details}"></goods-table>
					</view>
				</view>
			</view>
			<view class="box-link">
				<view class="cell"><view class="radius"></view><view class="line"></view><view class="radius"></view></view>
				<view class="cell"><view class="radius"></view><view class="line"></view><view class="radius"></view></view>
			</view>
			<view class="grid-box">
				<view class="" v-if="form.mergeOrderId == 0">
					<u-form-item label="负责人" class="u-p-0" required>
						<view class="input-text u-flex u-m-l-0" @click="gie = true;">
							<text>{{form.gie || '点击选择负责人'}}</text>
							<view class="u-flex-1"></view>
							<u-icon name="arrow-right" class="tips-txt"></u-icon>
						</view>
					</u-form-item>
					<staff-list v-model="gie" @confirm="confirmBrother" @close="gie = false"></staff-list>
				</view>
				
				<view class="" v-if="form.mergeOrderId == 0">
					<u-form-item label="厂商" class="u-p-0" required>
						<view class="input-text u-flex u-m-l-0" @click="station = true">
							<text>{{form.station}}</text>
							<view class="u-flex-1"></view>
							<u-icon name="arrow-right" class="tips-txt"></u-icon>
						</view>
					</u-form-item>
					<manufacturerList v-model="station" @confirm="confirmPackstation" @close="station = false"></manufacturerList>
				</view>
				<!-- <view class="">
					<u-form-item label="需求出库时间" class="u-p-0" required>
						<view class="input-text u-flex u-m-l-0" @click="time()">
							<text>{{form.time}}</text>
							<view class="u-flex-1"></view>
							<u-icon name="arrow-right" class="tips-txt"></u-icon>
						</view>
					</u-form-item>
					<u-picker @confirm="confirmtiem" mode="time" v-model="timeshow" :params="params"></u-picker>
				</view> -->
				<!-- <view class="">
					<u-form-item label="合并出库单（可选）" class="u-p-0">
						<view class="input-text u-flex u-m-l-0">
							<view @click="chooseMergeOrder">{{form.mergeOrder}}</view>
							<view @click="chooseMergeOrder" class="u-flex-1"></view>
							<u-icon name="close-circle" class="tips-txt u-font-36" v-if="form.mergeOrderId > 0" @click="cleanMergeOrder"></u-icon>
							<u-icon name="arrow-right" class="tips-txt"  @click="chooseMergeOrder" v-else></u-icon>
						</view>
					</u-form-item>
				</view> -->
				<view class="">
					<u-form-item label="备注">
						<u-input v-model="form.remark" type="textarea" border input-align="left" placeholder="请输入备注"/>
					</u-form-item>
				</view>
				<view class="">
					<u-form-item label="出库凭证">
						<common-upload max-count="9" @on-success="uploadSuccess" @on-remove="uploadRemove"></common-upload>
					</u-form-item>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="bottom-box">
				<view class="fixed-container">
					<view class="btn-group">
						<view class="u-flex">
							<view class="u-p-r-30 u-text-right">
								<text class="u-color-main" style="text-decoration: underline;" @click="back">取消</text>
							</view>
							<view class="u-flex-1">
								<u-button type="primary" @click="createStorage">提交出库</u-button>
							</view>
						</view>
					</view>
				</view>
				<view class="fixed-placeholder"></view>
			</view>
		</u-form>
	</view>
</template>

<script>
	import staffList from '@/components/form-select-type/staff-list.vue'
	import manufacturerList from '@/components/form-select-type/manufacturer-list.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		components:{
			staffList,
			manufacturerList
		},
		data() {
			return {
				car: [], //小哥车辆
				// selector: [], //车辆数据
				params: { //时间选择
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				timeshow: false, //时间
				gie: false, //小哥
				station: false, //打包站
				store: false, //站点
				id: 0,
				fileList: [], //图片
				form: {
					gie: "请选择负责人",
					station: "请选择打包站",
					time: '请选择时间',
					store: '请选择站点',
					mergeOrder: '请选择需要合并的出库单',
					
					// 提交的参数
					packstationid: null,//打包站id
					storeid: null, //站点id
					brotherid: '',
					demandtime: null,//出库时间
					deliverdetails: [],//库存清单
					proves: [],//图片
					mergeOrderId: 0,//合并出库单的id
					vehicleId: 0, //车辆id
					remark: ''
				},
				confirmForm: {
					orderid: 0,
					details: [
						// {
						// 	id: 0,
						// 	name: '杂纸',
						// 	weight: 10,
						// 	price: 9.9
						// }
					],
					total: 0
				},
				packStation: [], //打包站数据
				storeList: [], //站点数据
				stockList: [],
				itemStyle:{
					marginTop: '10px',
					borderBottom: '1px solid #f1f1f1'
				},
				// 切换移库或出库
				checked: false,
				open: false,
				remarkArr: [], //备注数组
				all: false, //全选库存
				fileUploadURL: getApp().globalData.fileUploadURL
			};
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				header: state => state.Authorization,
				storeId: state => state.storeId
			}),
			...mapState('shop', {
				goodsDetails: state => state.goodsDetails,
				chooseOrder: state => state.chooseOrder
			})
		},
		watch: {
			checked(){
				this.form.packstationid = null//打包站id
				this.form.station = "请选择打包站"
				this.form.storeid = null //站点id
				this.form.store = "请选择站点"
			},
			goodsDetails(value){
				let confirmForm = {
					orderid: this.orderId,
					details: value
				}
				this.confirmChoose(confirmForm)
			},
			chooseOrder(obj){
				console.log('chooseOrder',obj)
				if(obj.id > 0){
					this.form.mergeOrder = obj.number
					this.form.mergeOrderId = obj.id
				}
			}
		},
		onLoad() {
			// this.getStock().then(()=>{
			// 	// let obj = {}
			// 	// obj.index = this.stockList[0].typeId
			// 	// this.getPrice(obj)
			// })
		},
		methods: {
			// handleConfirm(confirmForm) {
			// 	// 将 details 存储在 Vuex 中
			// 	this.$store.commit('shop/setGoodsDetails', confirmForm.details)
			// },
			chooseMergeOrder(){
				uni.navigateTo({
					url: 'chooseOrderList/chooseOrderList'
				})
			},
			cleanMergeOrder(){
				this.form.mergeOrder = '请选择需要合并的出库单'
				this.form.mergeOrderId = 0
				this.$store.commit('shop/setChooseOrder', {})
			},
			addGoods(){
				this.$store.commit('shop/setGoodsDetails', this.confirmForm.details)
				uni.navigateTo({
					url: `/pages/shop/goodsChoose/goodsChoose?noPrice=true&isStock=true`,
				});
			},
			// getStock() { //获取库存
			// 	return this.$u.get('/Store/Stock/Get').then((res) => {
			// 		console.log(res)
			// 		let data = res
			// 		data.forEach((item) => {
						
			// 			item.name = item.typenames
			// 			item.Product.forEach((cell)=>{
			// 				cell.largeId = item.typeId
			// 				cell.price = 0
			// 				cell.issue = null
			// 			})
			// 		})
			// 		this.stockList = data
			// 	}).finally(()=>{
					
			// 	})
			// },
			initCollapse(){
				this.$nextTick(()=>{
					this.$refs.stockCollapse.init()
				})
			},
			// getPrice(item){ //获取小类的打包站价格
			// 	let productIds = []
			// 	let pid = item.index // pid为品类类型ID

			// 	this.stockList.forEach((item,k)=>{
			// 		if(item.typeId == pid){
			// 			item.Product.forEach((cell,i)=>{
			// 				this.$u.post(`AIO/Store/GetPackPrice`,{
			// 					productId: cell.typepath
			// 				}).then((res) => {
			// 					this.$set(this.stockList[k].Product[i], 'price', res.price)
			// 				})
			// 			})
			// 		}
			// 	})
			// },
			confirmChoose(confirmForm){
				console.log('confirmForm',confirmForm)
				this.confirmForm.orderid = this.id
				// 获取上一次添加的回收品信息
				let historyArr = []
				if(this.confirmForm.details.length > 0){
					historyArr = JSON.parse(JSON.stringify(this.confirmForm.details))
				}
				
				// 提示信息
				this.tips = []
				let details = confirmForm.details
				this.confirmForm.details = details
				// 获取核实数据及价格
				// details.forEach((cell,i)=>{
				// 	this.$u.get(`/Waste/Price/Get?productId=${cell.id}&userId=0`).then((res)=>{
				// 		this.$set(this.confirmForm.details[i], 'allowedit', res.edit)
				// 		if(this.confirmForm.details[i].allowedit){
				// 			this.tips.push({
				// 				title: `${cell.name}可设置价格`,
				// 				description: `价格范围仅能设置在${res.minprice}-${res.highprice}元内`
				// 			})
				// 		}
						
				// 		// 判断是否已经设定了价格，没有就赋值最低价格
				// 		if(this.confirmForm.details[i].price == 0){
				// 			// this.confirmForm.details[i].price = res.minprice
							
				// 			this.$set(this.confirmForm.details[i], 'price', res.minprice)
				// 		}else{
				// 			// this.confirmForm.details[i].price = res.price
							
				// 			this.$set(this.confirmForm.details[i], 'price', res.price)
				// 		}
				// 		this.$set(this.confirmForm.details[i], 'highprice', res.highprice)
				// 		this.$set(this.confirmForm.details[i], 'minprice', res.minprice)
				// 		// 若有上一次添加的回收品信息，赋值上一次填写的重量
				// 		historyArr.forEach((ha,i)=>{
				// 			if(ha.id == cell.id){
				// 				cell.weight = ha.weight
				// 				cell.price = ha.price
				// 			}
				// 		})
				// 	})
				// })
				// this.setTotal()
			},
			upDate(confirmForm){
				this.confirmForm.orderid = this.id
				this.confirmForm.details = confirmForm.details
				
				this.confirmForm.total = 0
				this.confirmForm.details.forEach((item, index) => {
					if(item.weight){
						this.confirmForm.total += item.weight*item.price
					}
				})
				this.$store.commit('shop/setGoodsDetails', this.confirmForm.details)
			},
			confirmBrother(item) {
				console.log(item)
				this.form.gie = item.name
				this.form.brotherid = item.id
			},
			confirmPackstation(item) {
				// 选择厂商
				this.form.station = item.name
				this.form.packstationid = item.id
			},

			confirmtiem(e) {
				console.log(e)
				this.form.demandtime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
				this.form.time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},

			time() {
				this.timeshow = true
			},
			uploadError(data, index, lists, name) {
				uni.showToast({
					icon: 'none',
					title: '提交失败，请重试'
				})
			},
			uploadSuccess(data, index, lists, name) {
				this.showUploadList = false
				this.form.proves = []
				this.form.proves.push(data.datas.path)
			},
			// 上传图片删除处理
			uploadRemove(index, lists, name){
				this.form.proves.splice(index,1);
				this.fileList.splice(index,1)
			},
			// 计算合计值
			setTotal() {
				this.confirmForm.total = 0
				this.stockList.forEach((item) => {
					item.Product.forEach((cell)=>{
						this.confirmForm.total += Number(cell.issue)
					})
				})
			},
			back(){
				uni.showModal({
					title: '是否退出录入？',
					content: '退出录入，将清空已录入内容？',
					success: (res)=> {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			},
			// 创建出库单
			createStorage() {
				if(this.form.mergeOrderId == 0){
					if(this.form.brotherid == 0){
						uni.showToast({
							title: '请选择负责人',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: "none",
							//显示持续时间为 2秒
							duration: 2000
						})
						return
					}
					if(this.form.packstationid == 0){
						uni.showToast({
							title: '请选择厂商',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: "none",
							//显示持续时间为 2秒
							duration: 2000
						})
						return
					}
				}
				if(this.confirmForm.details.length == 0){
					uni.showToast({
						title: '请选择出库可回收物',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: "none",
						//显示持续时间为 2秒
						duration: 2000
					})
					return
				}
				
				let data = {
					"supercargoId": this.form.brotherid || 0,
					// "demandTime": this.form.demandtime,
					"details": [],
					"proves": this.form.proves,
					"remark": this.form.remark,
					"storeId": this.storeId,
					// "franchiseOutOrderId": this.form.mergeOrderId,
					"manufacturerId": this.form.packstationid || 0
				}
				this.confirmForm.details.forEach((item)=>{
					data.details.push({
						id: item.id,
						remarks: item.typeremarks,
						weight: item.weight
					})
				})
				
				uni.showModal({
					title: '提示',
					content: '您确定要提交出库吗?',
					success: (res) => {
						if (res.confirm) {
							console.log('创建出库单确认提交时的参数',data)
							this.$u.post('/Store/OutOrder/Create', data).then((res) => {
								console.log(res)
								uni.showModal({
									title: '出库成功',
									confirmText: '返回列表',
									showCancel: false,
									cancelText: '关闭',
									success: (res)=> {
										if (res.confirm) {
											console.log('用户点击确定');
											uni.redirectTo({
												url: '/pages/shop/outbound/list/list'
											})
										} 
									}
								});
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: bold;

		.total-price {
			font-size: 32rpx;
			color: $u-color-red;
		}
	}

	.bottom-box {
		.fixed-container {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			height: 132rpx;
			z-index: 99;
			box-shadow: 0 0 16rpx #e7e7e7;
		}

		.fixed-placeholder {
			height: 132rpx;
			width: 750rpx;
			margin-top: 30rpx;
		}

		.total {
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}

		.btn-group {
			padding: 30rpx;

			.u-flex-1+.u-flex-1 {
				margin-left: 20rpx;
			}
		}
	}

	.w-100 {
		width: 100%;
	}
	
	.input-text {
		border: 1px solid $u-border-color;
		border-radius: 5px;
		height: 70rpx;
		margin: 20rpx 0;
		padding-right: 20rpx;
		padding-left: 20rpx;
		line-height: 70rpx;
		width: 100%;
		margin-left: 30rpx;
		input{
			height: 70rpx;
		}
	}
	
	.err {
		color: $u-type-error;
		border-color: $u-type-error !important;
	}
</style>
